<template>
  <div class="center">
    <div class="center-left">
      <img :src="'/images/user-center/card.png' | imgResize(350,205)" />
      <dl>
        <dt>知涯VIP专享功能</dt>
        <dd>智能填报志愿表</dd>
        <dd>志愿合理性分析</dd>
        <dd>招生信息查询</dd>
        <dd>专家咨询服务</dd>
      </dl>
      <div class="center-left--explain">
        <h3>适用人群说明</h3>
        <ul>
          <li>适用考生：普通类文理科考生（上海、浙江即将上线）</li>
          <li>适用批次：普通类提前批</li>
          <li>适用范围：全国28个省市（西藏、云南除外）</li>
          <li>使&nbsp;&nbsp;效&nbsp;&nbsp;期：1年</li>
        </ul>
      </div>
    </div>
    <ul class="center-right">
      <li v-for="(item, index) in list" :key="index">
        <h3>{{item.title}}</h3>
        <p>{{item.des}}</p>
        <img :src="item.img | imgResize(280,138)" />
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data () {
    return {
      list: [{
        title: '最科学的填报志愿方法',
        des: '50位专家共同参与设计的科学填报法，为你定制最佳的志愿方案。',
        img: '/images/user-center/vip1.png'
      }, {
        title: '最精准的数据支撑',
        des: '院校、专业录取数据、招生计划与考试院同步更新。',
        img: '/images/user-center/vip2.png'
      }, {
        title: '最专业的生涯顾问服务',
        des: '生涯规划专家、教育专家、高级教师实时指导，为学生提供精准定制服务，辅助生涯规划决策。',
        img: '/images/user-center/vip3.png'
      }, {
        title: '最智能的生涯测评',
        des: '为你提供最全面、最客观的”专业“评价，让你更多元、更深入的了解专业。',
        img: '/images/user-center/vip4.png'
      }, {
        title: '最全面的大学、专业、职业库',
        des: '生动、形象的介绍，让你更多元、更深入地了解大学、专业、职业。',
        img: '/images/user-center/vip5.png'
      }, {
        title: '最实用的生涯规划课程',
        des: '帮助学生探索自我和外部变化的环境，找到人生努力的方向，最大化实现自我价值。',
        img: '/images/user-center/vip6.png'
      }]
    }
  }
}
</script>

<style lang="scss" scoped>
.gou{
  font-family: "iconfont" !important;
  font-size: $size16;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  position:absolute; right:0px; top:0px;
  content: "\e667"; color:#06D6A0;
  font-size:20px;
}
.center{
  padding:20px;
  display:flex;
  justify-content: space-between;
  background:$light;
  border-radius:10px;
  &-left{
    width: 350px;
    display: flex;
    flex-direction: column;
    img{
    }
    >dl{
      display: flex;
      flex-direction: column;
      padding: 15px 40px 40px;
      dt{
        font-size:18px;
        color:#444;
        margin-bottom:20px;
        text-align:center;
      }
      dd{
        position:relative;
        color:#69707F;
        margin-bottom:15px;
        padding-right:20px;
        &:after{
          @extend .gou;
        }
      }
    }
    &--explain{
      padding:20px;
      background:#F7F7FB;
      border-radius:10px;
      >h3{
        font-weight:normal;
        color:#69707F;
        font-size:16px;
        text-align:center;
        margin-bottom:15px;
      }
      >ul{
        li{
          color:#ADADAD;
          font-size:12px;
          line-height:1.6;
        }
      }
    }
  }
  &-right{
    width: 585px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    li{
      width: 280px;
      display: flex;
      flex-direction: column;
      padding-bottom:20px;
      >h3{
        position:relative;
        font-weight: normal;
        font-size: 18px;
        color:#444;
        padding-left:25px;
        &:after{
          @extend .gou;
          left:0px; top:-2px;
        }
      }
      >p{
        color:#ADADAD;
        font-size:13px;
        line-height:1.4;
        padding:5px 0;
      }
    }
  }
}
</style>
